<template>
  <div
    class="index-header-banner-container"
    :style="{ background: currentColor, boxShadow: '0 0 10px rgba(0,0,0,0.1)' }"
  >
    <cityFixed :isColorLight="isColorLight"></cityFixed>
    <div class="banner-box">
      <div class="search">
        <input type="text" placeholder="请输入电影名称" />
      </div>
      <div class="swiper">
        <nut-swiper
          :init-page="0"
          :auto-play="3000"
          pagination-visible
          pagination-color="#426543"
          pagination-unselected-color="#808080"
          @change="handleSwiperChange"
        >
          <nut-swiper-item
            v-for="(item, index) in list"
            :key="index"
            style="border-radius: 5px; height: 90px;overflow: hidden"
          >
            <image
              :src="item"
              mode="aspectFill"
              style="height: 100%; width: 100%;scale: 0.1;"
            />
          </nut-swiper-item>
        </nut-swiper>
      </div>
    </div>
  </div>
</template>

<script setup>
import cityFixed from "./header-city.vue";
import { Search2 } from "@nutui/icons-vue-taro";
import { ref, onMounted, computed, toRefs } from "vue";
const val = ref("");
const props = defineProps({
  isColorLight: Boolean,
});
const { isColorLight } = toRefs(props);

const colors = ref([
  [113, 66, 59],
  [242, 216, 179],
  [220, 147, 105],
]);

const colors1 = ref([
  [113, 66, 59],
  [242, 216, 179],
  [220, 147, 105],
]);
const colors2 = ref([
  [210, 199, 193],
  [37, 33, 29],
  [218, 70, 31],
]);
const colors3 = ref([
  [46, 42, 42],
  [177, 169, 171],
  [139, 151, 159],
]);
const colors4 = ref([
  [85, 57, 43],
  [216, 194, 176],
  [176, 180, 175],
]);
const currentImage = ref(
  "https://gw.alicdn.com/tfscom/i3/O1CN01s4djbH29FutyK4fzY_!!6000000008039-0-alipicbeacon.jpg_300x300.jpg"
);
const currentColor = computed(() => {
  const startColor1 = `rgb(${colors.value[0][0]}, ${colors.value[0][1]}, ${colors.value[0][2]})`;
  const startColor2 = `rgb(${colors.value[1][0]}, ${colors.value[1][1]}, ${colors.value[1][2]})`;
  const startColor3 = `rgb(${colors.value[2][0]}, ${colors.value[2][1]}, ${colors.value[2][2]})`;

  return `linear-gradient(to bottom, ${startColor1}, ${startColor2},${startColor3})`;
});
const list = ref([
  "https://gw.alicdn.com/tfscom/i3/O1CN01s4djbH29FutyK4fzY_!!6000000008039-0-alipicbeacon.jpg_300x300.jpg",
  "https://gw.alicdn.com/i4/O1CN01zYtvCj1IXcZQwdhXm_!!6000000000903-0-alipicbeacon.jpg_480x480Q30s150.jpg",
  "https://gw.alicdn.com/i2/O1CN01XZwM5P1u4iycl2qgW_!!6000000005984-0-alipicbeacon.jpg_480x480Q30s150.jpg",
  "https://gw.alicdn.com/tfscom/i2/O1CN01FJb26a1sOIfv6VI4V_!!6000000005756-0-alipicbeacon.jpg",
]);

const handleSwiperChange = (event) => {
  currentImage.value = list.value[event]; // 更新当前显示的图片URL
  // 设定阈值
  const darkThreshold = 50; // 示例阈值，可以根据实际情况调整
  const lightThreshold = 200; // 示例阈值，可以根据实际情况调整
  if (event == 0) {
    // colors.value = filterColors(colors1.value, darkThreshold, lightThreshold);
    colors.value = colors1.value;
  } else if (event == 1) {
    // colors.value = filterColors(colors2.value, darkThreshold, lightThreshold);
    colors.value = colors2.value;
  } else if (event == 2) {
    // colors.value = filterColors(colors3.value, darkThreshold, lightThreshold);
    colors.value = colors3.value;
  } else {
    // colors.value = filterColors(colors4.value, darkThreshold, lightThreshold);
    colors.value = colors4.value;
  }
};
onMounted(async () => {});

// const isColorTooDarkOrLight = (color, darkThreshold, lightThreshold) => {
//   const [R, G, B] = color;
//   const L = 0.299 * R + 0.587 * G + 0.114 * B;
//   return L < darkThreshold || L > lightThreshold;
// };
// const filterColors = (colors, darkThreshold, lightThreshold) => {
//   return colors.filter(
//     (color) => !isColorTooDarkOrLight(color, darkThreshold, lightThreshold)
//   );
// };
</script>

<style lang="scss">
.index-header-banner-container {
  padding: 30px;
  height: 100%;
  position: relative;
  .background-img-vague {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    z-index: -1;
    -webkit-filter: blur(20px);
  }
  .banner-box {
    margin-top: 100px;
    .swiper {
      overflow: hidden;
      // padding: 0 30px;
      margin-top: 20px;
    }
    .search {
      input {
        padding: 10px 30px;
        // background-color: ;
        border: 1px solid #f0dceb;
        border-radius: 35px;
        font-size: 20px;
        color: #fff !important;
        font-weight: 700;
      }
    }
  }
}
</style>
